<template>
  <div id="modules-home">
    <div class="home-text-wrapper">
      <div class="home-text">
        <div class="home-text-title">
          <p>
            个人网站
            <icon-svg name="spase"></icon-svg>
          </p>
        </div>
        <div class="home-text-content">
          <p>{{ helloText }}</p>
        </div>
      </div>
    </div>
    <template>
      <!-- <hot-blog /> -->
    </template>
  </div>
</template>

<script>
// import hotBlog from './home-hot-item.vue'
export default {
  data() {
    return {
      helloText: '欢迎大家来到小新的个人空间! 每一次分享都是自己的提升'
    }
  },
  components: {
    // hotBlog
  }
}
</script>

<style lang="scss">
#modules-home {
  @keyframes identifier {
    0% {
      left: 420px;
    }
    100% {
      left: -420px;
    }
  }
  .home-text-wrapper {
    min-height: 100vh;
    .home-text {
      padding-top: 300px;
      padding-left: 200px;
      .home-text-title {
        font-family: '微软雅黑';
        font-size: 70px;
        font-weight: bold;
        font-size: normal;
        color: #fff;
        display: inline-block;
        vertical-align: bottom;
        margin-bottom: 20px;
      }
      .home-text-content {
        position: relative;
        overflow: hidden;
        width: 420px;
        height: 30px;
        & > p {
          position: absolute;
          animation: identifier 10s infinite;

          font-size: 15px;
          line-height: 30px;
          letter-spacing: 1px;
          color: #fff;
        }
      }
    }
  }
}
</style>
